<template>
	<view style="padding: 20rpx;">
		<view class="head">
			<image src="/static/list/bg.png" mode=""></image>
			<view class="img_div flex">
				<image :src="user.avatar?user.avatar:'/static/logo.png'" mode=""></image>
				<view class="div">
					<view class="name ">{{user.nickname||'城邦小店'}}</view>
					<view class="jdt">
						<view style="background-color: #fff;height: 100%;border-radius: 4rpx;" :style="{width:t<=0?100:96+'%'}"></view>
					</view>
					<view class="text">剩余{{t>0?t:0}}天</view>
					<view class="endtime">{{t2?t2:'已'}}到期</view>
				</view>
			</view>
			<view class="title">商家入驻平台，商家需要支付入驻费</view>
			<view class="list bg-white">
				<view v-for="(item,index) in list" :key="index" class="item flex-cb" @click="pay(item.id)">
					<view class="month">{{item.title}}</view>
					<view class="money flex-cb">
						<view class="num"><text>￥</text>{{item.price}}</view>
						<view class="button flex-c">续费</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:'',
				t:'',//剩余天数
				t2:'',//到期时间
				list:'',
				id:0
			};
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title:'店铺续费'
			})
			
			this.$api.user({},true).then(res=>{
				if(res.code == 200001){
					this.user = res.data
					console.log(res);
					if(this.user.avatar != ""){
						this.user.avatar = this.$base + res.data.avatar
					}
				}
			})
			this.get()
			this.$api.money({},1).then(res=>{//入驻费用
				if(res.code == 200001) {
					this.list = res.data
				}
			})
		},
		methods:{
			get(){
				this.$api.merchants_info({},1).then(res=>{//商家信息
					console.log(res);
					if(res.code == 200001) {
						this.user.endtime = res.data.settled_expiry_time
						const setTime = new Date(this.user.endtime);
						const nowTime = new Date();
						const restSec = setTime.getTime() - nowTime.getTime();
						const day = parseInt(restSec / (60*60*24*1000));
						const hour = parseInt(restSec / (60*60*1000) % 24);
						const minu = parseInt(restSec / (60*1000) % 60);
						console.log(day,hour,minu);
						this.t = day
						this.t2 = this.user.endtime.substring(0,10)
					}
				})
			},
			pay(id){//立即支付
				this.$api.money_order({
					settled_fee_id:id
				},1).then(res=>{
					if(res.code == 200001){
						console.log(res,'1');
						this.id = res.data.id
						 this.$api.money_order_pay({},res.data.id,1).then(res=>{
									
									 uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.data.timeStamp,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										signType: res.data.signType,
										paySign: res.data.paySign,
										orderInfo:res.data.prepay_id,
										 success:(r)=>{  
											 console.log(r,3);
											 this.$api.money_order_notify({},this.id,1).then(res=>{
											 	console.log(res,'4');
											 	 if(res.code == 200001){
													uni.showToast({
														title:'续费成功',icon:'none'
													})
													this.get()
											 	 }
											 })
										 }, 
										 fail(err) {
										 	console.log(err);
										 }
									})
									
						 })
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.head{
	position: relative;
	.img_div,image{
		width: 710rpx;height: 240rpx;
		image{
			margin: 60rpx 18rpx 0 40rpx;
			width: 120rpx;height: 120rpx;border-radius: 50rpx;
		}
	}
	.img_div{
		position: absolute;top: 0;left: 0;
		.div{
			height: 120rpx;margin-top: 60rpx;
			.name{
				color: #0E7553;font-size: 36rpx;font-weight: 500;
			}
			.jdt{
				overflow: hidden;
				width: 300rpx;
				height: 8rpx;
				background: #14A877;
				border-radius: 4rpx;
				margin: 20rpx 0 6rpx 0;
			}
			
		}
		.endtime{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}
	}
	.title{
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-top: 36rpx;
		padding-left: 20rpx;
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.list{
		padding: 0 20rpx 56rpx 20rpx;
		.item{
			margin-bottom: 56rpx;
			.month{
				font-size: 36rpx;color: #333;
			}
			.money{
				.num{
					color: #FF2E2E;
					font-size: 36rpx;
					text{
						font-size: 30rpx;
					}
				}
				.button{
					margin-left: 30rpx;
					width: 96rpx;
					height: 56rpx;
					background: #FF2E2E;
					border-radius: 10rpx;
					font-size: 30rpx;
					color: #fff;
				}
			}
		}
	}
	
}
.text,.endtime{
	font-size: 24rpx;color: #14A877;
}
</style>
